<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
</head>

<body>
    <div th:include="head" style="width: 100%;"></div>
    <div id="articleDetail" v-if="article">
        <!-- 左侧导航栏 -->
        <div>
            <ul class="gray large leftNav">
                <li>
                    <div @click="like">
                        <p>
                            <i v-if="isLikeArticle" class="heart icon"></i>
                            <i v-else class="heart outline icon"></i>
                        </p>
                        <p>赞</p>
                        <p v-if="article">{{article.likes}}</p>
                    </div>
                </li>
                <li>
                    <div @click="setIsOpen">
                        <p>
                            <i class="thumbs up icon"></i>
                        </p>
                        <p>赏</p>
                        <p v-if="article">{{article.rewards}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 主题内容 -->
        <div class="content">
            <p class="center title" v-if="article">{{article.title}}</p>
            <p class="center gray small">{{article.createTime}} 字数 {{article.words}} 阅读 {{article.views}}</p>
            <!-- 作者&文章信息 -->
            <div class="center" style="margin: 36px auto;">
                <a v-if="user" :href="'/user/'+user.userId">
                    <div class="headImage" :style='{"background-image":"url("+user.headImage+")"}'>
                        <span>{{user.name}}</span>
                    </div>
                </a>
                <div v-if="article" style="width: 68%;">
                    <button v-show="loginUser" class="ui secondary button" @click="follow(user.userId)"
                        style="height: 36px;padding: 0 24px;">
                        <span v-if="isFollow">取关</span>
                        <span v-else>关注</span>
                    </button>
                </div>
            </div>
            <article class="_2rhmJa" id="content">
            </article>
        </div>

        <!-- 评论回复列表 -->
        <div id="comments">
            <ul v-if="comments">
                <li v-for="(c, index) in comments">
                    <div class="center">
                        <a :href="['/user/']+c.user.userId">
                            <div class="headImage" :style='{"background-image":"url("+c.user.headImage+")"}'>
                                
                            </div>
                        </a>
                        <div style="width: 88%;">
                            <div class="small gray">
                                {{index + 1}}楼 
                                <span>{{c.user.name}}</span>
                                {{c.comment.createTime}}
                            </div>
                            <p>{{c.comment.content}}</p>
                        </div>
                    </div>
                    <div v-if="c">
                        <i class="comment outline icon" onclick="openWindow()" @click="setIsReply(c.comment)"></i>
                        <span style="margin-right: 72px;"
                            onclick="openWindow()" @click="setIsReply(c.comment)">回复</span>
                        <i v-if="c.isLikeComment" class="heart icon" @click="unLikeComment(c)"></i>
                        <i v-else class="heart outline icon" @click="likeComment(c)"></i>
                        <span>{{c.comment.likes}}赞</span>
                        <!-- 回复列表 -->
                        <ul style="margin-left: 72px;">
                            <li v-for="r in c.replies">
                                <div class="center">
                                    <a :href="['/user/']+r.user.userId">
                                        <div class="headImage"
                                            :style='{"background-image":"url("+r.user.headImage+")"}'>
                                        </div>
                                    </a>
                                    <div style="width: 88%;">
                                        <div class="small gray">
                                            <span class="small">{{r.user.name}}</span>
                                            {{r.comment.createTime}}
                                        </div>
                                        <p>{{r.comment.content}}</p>
                                    </div>
                                </div>
                                <div>
                                    <i class="comment outline icon" onclick="openWindow()" @click="setIsReply(r.comment)"></i>
                                    <span style="margin-right: 72px;"
                                        onclick="openWindow()" @click="setIsReply(r.comment)">回复</span>
                                    <i v-if="r.isLikeComment" class="heart icon" @click="unLikeComment(r)"></i>
                                    <i v-else class="heart outline icon" @click="likeComment(r)"></i>
                                    <span>{{r.comment.likes}}赞</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 空div，防止评论显示补全 -->
        <div style="height: 360px;">

        </div>

        <!-- 评论点赞 -->
        <div id="comment" v-if="article">
            <ul class="gray center">
                <li class="ui search">
                    <div class="ui icon input" id="input">
                        <input class="prompt" type="text" id="input" placeholder="友善评论，温暖评论区..." onclick="openWindow()">
                    </div>
                </li>
                <li>
                    <i class="comment icon"></i>
                    <span>{{article.comments}}<a href="#comments" class="gray">评论</a></span>
                </li>
                <li @click="like">
                    <i v-if="isLikeArticle" class="heart icon"></i>
                    <i v-else class="heart outline icon"></i>
                    <span v-if="article.likes">{{article.likes}}赞</span>
                </li>
            </ul>
        </div>

        <!-- 回复窗口 -->
        <div class="window" id="reply" style="display:none;">
            <i class="close icon" onclick="closeWindow()"></i>
            <textarea class="prompt" type="text" placeholder="友善评论，温暖评论区..." id="inputTextarea"></textarea>
            <div class="center">
                <button class="ui basic button" style="width: fit-content; margin: 24px 6px;" @click="commentOrReply()">发表</button>
            </div>
        </div>

        <!-- 打赏窗口 -->
        <div class="ui form window" id="reward" v-show="isOpen">
            <i class="close icon" @click="isOpen = false"></i>
            <textarea name="remark" id="" cols="30" rows="10" placeholder="留言"></textarea>
            <div class="center">
                <input class="ui input" type="number" name="reward" placeholder="打赏金额">
                <button class="ui basic button" @click="reward">朕赏了</button>
            </div>
        </div>
    </div>
    <script src="/js/articleDetail.js"></script>
    <link rel="stylesheet" href="/css/articleDetail.css">
    <link rel="stylesheet" href="/css/chunk.css">
</body>

</html>